<template>
  <div>
    <el-dialog
      title="心愿查看"
      width="800px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialogBody">
        <div class="stepsBox">
          <el-steps direction="vertical" :active="3">
            <el-step title="">
              <template slot="title">
                发布时间：{{ info.release_date }}
              </template>
              <template slot="description">
                <ul class="infobox">
                  <li>
                    <span>心愿标题：</span>
                    <p :title="info.title" class="ellipsis">{{ info.title }}</p>
                  </li>
                  <li>
                    <span>心愿类型：</span>
                    <p>{{ info.type == 1 ? "普通服务" : "助老服务" }}</p>
                  </li>
                  <li>
                    <span>心愿描述：</span>
                    <p :title="info.describe" class="ellipsis">
                      {{ info.describe }}
                    </p>
                  </li>
                  <li>
                    <span>心愿价值：</span>
                    <p>{{ info.score }}</p>
                  </li>
                  <li>
                    <span>期望完成时间：</span>
                    <p>{{ info.expected_time }}</p>
                  </li>
                  <li>
                    <span>发布人：</span>
                    <p>{{ info.user_name }}</p>
                  </li>
                  <li>
                    <span>手机号：</span>
                    <p>{{ info.phone }}</p>
                  </li>
                  <li>
                    <span>所在小区：</span>
                    <p>{{ info.village_name }}</p>
                  </li>
                  <!-- <li>
                    <span>详细住址：</span>
                    <p>{{ info.address }}</p>
                  </li> -->
                </ul>
              </template>
            </el-step>
            <el-step v-if="info.status == 9">
              <template slot="title">
                取消时间：{{ info.cancel_date }}
              </template>
            </el-step>
            <el-step v-if="info.status == 2 || info.status == 3">
              <template slot="title">
                认领时间：{{ info.claimant_date }}
              </template>
              <template slot="description">
                <ul class="infobox">
                  <li>
                    <span>认领人：</span>
                    <p>{{ info.claimant }}</p>
                  </li>
                  <li>
                    <span>手机号：</span>
                    <p>{{ info.claimant_phone }}</p>
                  </li>
                  <li>
                    <span>所在小区：</span>
                    <p>{{ info.village_name }}</p>
                  </li>
                  <!-- <li>
                    <span>详细住址</span>
                    <p>{{ info.score }}</p>
                  </li> -->
                </ul>
              </template>
            </el-step>
            <el-step v-if="info.status == 3">
              <template slot="title">
                确认完成时间：{{ info.complete_date }}
              </template>
              <template slot="description">
                <ul class="infobox">
                  <li>
                    <span>确认人：</span>
                    <p>{{ info.complete_user_name }}</p>
                  </li>
                  <li>
                    <span>手机号：</span>
                    <p>{{ info.complete_phone }}</p>
                  </li>
                  <li>
                    <span>所在小区：</span>
                    <p>{{ info.village_name }}</p>
                  </li>
                  <!-- <li>
                    <span>详细住址</span>
                    <p>{{ info.score }}</p>
                  </li> -->
                </ul>
              </template></el-step
            >
          </el-steps>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { wishInfo } from "@/api/wish.js";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      active: 1,
      info: {},
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getInfo();
  },

  methods: {
    getInfo() {
      wishInfo({
        id: this.id,
      }).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
          console.log(this.info, "<<<<<<");
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  .stepsBox {
    .infobox {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      li {
        display: flex;
        margin-bottom: 8px;
        &:last-child {
          margin-bottom: 0;
        }
        span {
          width: 98px;
          height: 20px;
          margin-right: 16px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 16px;
          text-align: right;
        }
        p {
          width: 388px;
          height: 40px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #222222;
          line-height: 16px;
        }
      }
    }
  }
}
</style>
